<template>
  <div>
    <el-table
    :data="cartData"
    border
    style="width: 100%"
    class="table">
    <el-table-column
      fixed
      prop="title"
      label="书籍名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="category"
      label="分类"
      width="120">
    </el-table-column>
    <el-table-column
      prop="description"
      label="描述"
      width="120">
    </el-table-column>
    <el-table-column
      prop="publishDate"
      label="出版社"
      width="300">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="quantity"
      label="数量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="120">
    </el-table-column>
    
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">修改状态</el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="删除"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick1(scope.row)" type="text" size="small">删除订单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    :total="total"
    :page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 25]"
    :current-page="pageNum"
    :page-count="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
  </div>
</template>

<script>
import service from '@/axios/axiosConfig'
export default {
    data() {
        return {
            cartData: [],
            total: "",
      pageNum: 1,
      pageSize: 5,
        }
    },
    methods: {
        async handleClick(row){
            console.log(row.status)
            const responseBody={
                orderId: row.orderId,
                status: row.status == '已完成' ? '待支付':'已完成'
    
            }
            const response = await service.post('http://localhost:8080/order/updateOrder', responseBody)
            this.$message.success("修改成功")
            console.log(response)
            const responseBody1 = {
            username: sessionStorage.getItem("username"),
            pageNum: 1,
            pageSize: 10
        }
        const response1 = await service.post('http://localhost:8080/order/queryOrders', responseBody1)
        console.log(response1.data.data.list)
        this.cartData = response1.data.data.list
        },
        async handleClick1(row) {
            console.log(row.orderId)
            const responseBody = {
                orderId: row.orderId
            }

            const response = await service.post('http://localhost:8080/order/deleteOrder', responseBody)
            this.$message.success("删除成功")
            console.log(response)
            const responseBody1 = {
            username: sessionStorage.getItem("username"),
            pageNum: 1,
            pageSize: 10
        }
            const response1 = await service.post('http://localhost:8080/order/queryOrders', responseBody1)
        console.log(response1.data.data.list)
        this.cartData = response1.data.data.list
      },
      async handleCurrentChange(newPageNum) {
        this.pageNum = newPageNum
        const responseBody = {
            username: sessionStorage.getItem("username"),
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/order/queryOrders', responseBody)
        console.log(response.data.data.list)
      this.cartData = response.data.data.list
      this.total = response.data.data.total
      },
      async handleSizeChange(newPageSize) {
        this.pageSize = newPageSize
        const responseBody = {
            username: sessionStorage.getItem("username"),
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/order/queryOrders', responseBody)
        console.log(response.data.data.list)
      this.cartData = response.data.data.list
      this.total = response.data.data.total
      }
    },
    async created() {
        const responseBody = {
            username: sessionStorage.getItem("username"),
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/order/queryOrders', responseBody)
        console.log(response.data.data.list)
      this.cartData = response.data.data.list
      this.total = response.data.data.total
    }
}
</script>